<template>
  <div class="app-container">
    <div class="search" style="display: flex;">
      <span class="label">角色编号：</span>
      <el-input
        v-model="form.phone"
        class="input"
        placeholder="账户"
        clearable
      />
      <span class="label">角色名称：</span>
      <el-input
        v-model="form.name"
        class="input"
        placeholder="姓名"
        clearable
      />
      <el-button type="primary" @click="setResult">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="角色编号" width="180" />
      <el-table-column prop="name" label="角色名称" width="180" />
      <el-table-column prop="email" label="角色描述" />
      <el-table-column prop="" label="角色状态" />
      <el-table-column label="操作" width="210" align="center">
        <template>
          <el-button type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;">

      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getRoleList } from '@/api/authority'
export default {
  data() {
    return {
      form: {
        phone: '',
        name: ''
      },
      total: 0,
      currentPage: 1,
      tableData: []
    }
  },
  created() {
    this.fetchData(1)
  },
  methods: {
    setResult() {
      this.currentPage = 1
      this.fetchData()
    },
    reset() {
      this.currentPage = 1
      this.form = {
        phone: '',
        name: ''
      }
      this.fetchData()
    },
    fetchData(val) {
      this.listLoading = true
      getRoleList().then(response => {
        this.tableData = response.data
        // this.total = response.pagination.total
        // this.currentPage = response.pagination.current_page
        console.log(response.data, '------------------response.data')
        // this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      this.fetchData(val)
      console.log(`当前页: ${val}`)
    }
  }

}
</script>
<style lang="scss" scoped>
.search {
  align-items: center;
  margin-bottom: 20px;
}
.label {
  margin-right: 10px;
}

.input {
  width: 200px;
  margin-right: 30px;
}
</style>
